<template>
  <div>
    <el-dialog 
    :title="'编辑会员'" 
    :visible.sync="addInfo.isShow" 
    :before-close="cancel" 
    center>
      <el-form :model="memberForm" :rules="rules" ref="memberinfo">
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input autocomplete="off" v-model="memberForm.phone" ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
          <el-input autocomplete="off" v-model="memberForm.nickname" ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" >
          <el-input autocomplete="off" v-model="memberForm.password"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="memberForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
            :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirn" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { memberinfo, memberedit } from '../../request/api'
export default {
  data() {
    return {
      formLabelWidth: '120px',
      //表单对象
      memberForm: {
        uid:'',//会员编号，必填项
        nickname: "", //昵称
        password: "", //密码
        phone: '', //手机号
        status: 1, //状态   1正常2禁用   number类型number
      },
      rules: {
        nickname: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ],
        uid: [
          { required: true, message: '请输入上级管理员', trigger: 'change' }  
        ]
      }
    }
  },
  props: ['addInfo'],
  mounted() {
    //为了减少服务器的压力，我们进行行动触发优化
    //如何优化？ 如果用户已经在其他模块调用菜单列表则本模块不进行调用，否则。本模块触发行动
    //触发菜单行动
    // if (this.$store.getters['admin/getUser'].length == 0) {
    //   this.$store.dispatch('admin/getUserAction')
    // }
    if (this.rolelist.length == 0) {
      this.getroleAction();
    }
  },
  computed:{
    ...mapGetters({
      rolelist:'role/getrole'
    })
  },
  methods: {
    ...mapActions({
      getroleAction:'role/getroleAction',
      getCount:'admin/getCountAction',
      getUserList:'admin/getUserAction'
    }),
    reset() {
      this.memberForm = {
        uid:'',//会员编号，必填项
        nickname: "", //昵称
        password: "", //密码
        phone: '', //手机号
        status: 1, //状态   1正常2禁用   number类型number
      };
      this.$refs.memberinfo.resetFields();//重置表单验证
    },
    //取消事件
    cancel() {
      this.$emit('cancel', false);
      //清空
      this.reset();
    },
    //数据回显
    lookup(uid) {
      memberinfo({ uid }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.memberForm = res.list;
          this.memberForm.uid = uid;
          //因为后端要求修改的时候密码为空则不做修改，否则则修改最新的值
          this.memberForm.password = ''
        }
      })
    },
    //确定事件
    confirn() {
      // console.log(this.memberForm);
      this.$refs.memberinfo.validate((val) => {
        if (val) {
            //编辑逻辑
            memberedit(this.memberForm).then((res)=>{
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                //重新获取列表
                this.getUserList();
                //重新获取总条数
                this.getCount()
              } else {
                this.$message.error(res.msg)
              }
            })
        }
      })
    }
  },
};
</script>

<style scoped>

</style>
